

// variable indiquant si l'utilisateur déplace une oeuvre
var dragging_oeuvre = false;
// variables mémorisant l'id de l'oeuvre en train d'être déplacée et de ses coordonnées
var dragging_oeuvre_id = '';
var position_top = '';
var position_left = '';

// variable indiquant si l'utilisateur trie les oeuvres du collage
var sorting_oeuvre = false;
// variables mémorisant l'id de l'oeuvre en train d'être triée
var sorting_oeuvre_id = '';

// Variable mémorisant le nombre d'oeuvres présentes dans le collage
var counterCollage = 0;

var clone_created = false;

$("#collage_content").ready(function($){
// Fonction permettant de continuer à bénéficier de tous les événements même après un rechargement Ajax
    
    // Au click sur le bouton 'collage'
    $('#btn_acces_collage').click(function(){
        // Si la fenêtre de collage n'est pas déjà dépliée
        if(!($('#btn_acces_collage').hasClass('unfolded'))){
            // Appel de la méthode Ajax de JQuery, pour appeler le contrôleur du collage
            $.ajax({
                // url vers le controleur de gestion des collages et sa méthode par défaut 'index'
                // => la méthode 'index' étant celle utilisée par défaut, il n'est pas nécessaire
                // de la mentionner dans l'url ci-dessous
                url: '../collage',
                // Action de communication avec le serveur (ici, on choisit 'POST')
                type: 'POST',
                // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                async : false,
                success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                    // Insertion de la vue chargée par le controleur ('collage_view.php') dans
                    // le div '#collage' déjà présent dans la vue 'depot_view.php'
                    $('#collage_content').html(msg);
                    // On ajoute une classe indiquant que la fenêtre de collage est maintenant dépliée
                    $('#btn_acces_collage').addClass('unfolded');

                    // Création d'une animation de déplacement vers la droite de tout ce qui est
                    // contenu dans la fenêtre de collage
                    $('#collage').animate(
                        {"left": "+=204px"}, 1500, 'easeOutQuint'
                    );

                    // A l'ouverture de la fenêtre de collage, on autorise la fonctionnalité 'draggable'
                    $('.oeuvres_draggable').draggable({disabled: false});
                    
                    // On change le curseur en 'move' au survol des oeuvres draggable
                    $('.oeuvres_draggable').css('cursor','move');

                }
            });
            loadFormProperties();
        }
        // Sinon, la fenêtre de collage est déjà dépliée
        else{
            // On supprime la classe indiquant que la fenêtre de collage est dépliée
            // => cette fenêtre est maintenant pliée
            $('#btn_acces_collage').removeClass('unfolded');
            // Création d'une animation de déplacement de la fenêtre de collage vers la gauche
            // => On plie la fenêtre de collage
            $('#collage').animate(
                {"left": "-=204px"}, 1500, 'easeOutQuint'
            )

            // Modifications de propriétés css
            $('#collage').css('border', 'none');
            $('#collage').css('background-color', 'none');

            // A la fermeture de la fenêtre de collage, on inhibe la fonctionnalité 'draggable'
            $('.oeuvres_draggable').draggable({disabled: true});

            // On réinitialise le curseur par défaut au survol des oeuvres
            $('.oeuvres_draggable').css('cursor','auto');
        }
    });
    
});


function loadFormProperties(){


    // initialisation de Sortable sur #liste_oeuvres_collage
    $("#liste_oeuvres_collage").sortable();
    // on désactive la possibilité au navigateur de faire des sélections
    $("#liste_oeuvres_collage").disableSelection();


    /* ----------------------------------------------------------------------- */
    // Les événements qui suivent permettent de gérer le déplacement d'oeuvres //
    // et l'affichage de l'overlay sur la fenêtre de collage                   // 
    /* ----------------------------------------------------------------------- */

    // A l'appui sur une oeuvre affectée de la classe 'oeuvres_draggable',
    // on met à jour la variable globale 'dragging_oeuvre' indiquant que l'oeuvre est en train d'être déplacée
    $('.oeuvres_draggable').mousedown(function(){
        dragging_oeuvre = true;

        // On n'affiche plus les infos qui sont présentes lors du mouseOver
        $('#'+dragging_oeuvre_id).children().css('display', 'none');

        $('#overlay_collage').css('display','block');
        // Enregistrement des coordonnées de l'oeuvre avant de la déplacer
        position_left = parseInt($('#'+dragging_oeuvre_id).position().left);
        position_top = parseInt($('#'+dragging_oeuvre_id).position().top);

        if(clone_created == false){
            // Création d'un clone laissant une trace de l'oeuvre en train d'être déplacée
            $('#'+dragging_oeuvre_id).clone()
                                    .removeAttr("id")
                                    .attr("id", "clone_"+dragging_oeuvre_id)
                                    .removeClass("oeuvres_draggable")
                                    .removeClass("ui-draggable")
                                    .removeClass("ui-draggable-dragging")
                                    .css({'position' : 'absolute', 'left' : position_left+'px', 'top' : position_top+'px', 'opacity' : '0.2'})
                                    .appendTo("#canvas");

            $('#clone_'+dragging_oeuvre_id).children().css('display', 'none')
            clone_created = true;
        }
    });


    // Lorsque la souris pointe une oeuvre affectée de la classe 'oeuvres_draggable',
    // on récupère son id et on lui ajoute la classe 'oeuvres_toDrag', préparanr ainsi
    // un potentiel drag n drop de l'oeuvre
    $('.oeuvres_draggable').mouseover(function(event){
        dragging_oeuvre_id = (event.target.id);
        $("#"+dragging_oeuvre_id).addClass('oeuvres_toDrag');
    });


    // Lorsque la souris ne pointe plus une oeuvre affectée de la classe 'oeuvres_draggable',
    // on récupère son id et on lui retire la classe 'oeuvres_toDrag', le drag n drop n'étant plus possible
    $('.oeuvres_draggable').mouseout(function(){
        if(dragging_oeuvre == false){
            //var my_id = (event.target.id);
            $("#"+dragging_oeuvre_id).removeClass('oeuvres_toDrag');
            //dragging_oeuvre_id = '';
        }
    });


    // Au relachement de la souris sur une oeuvre affectée de la classe 'oeuvres_draggable',
    // on indique que l'oeuvre n'est plus  en train d'être déplacée, et
    // on lui retire la classe 'oeuvres_toDrag'
    $('.oeuvres_draggable').mouseup(function(){
        dragging_oeuvre = false;
        $("#"+dragging_oeuvre_id).removeClass('oeuvres_toDrag');

        // Replacement de l'oeuvre à ses coordonnées exactes
        $('#'+dragging_oeuvre_id).css("left",+position_left+"px");
        $('#'+dragging_oeuvre_id).css("top",+position_top+"px");

        // Suppression du clone créé lors du déplacement de l'oeuvre et de ses enfants
        $('#clone_'+dragging_oeuvre_id).empty().remove();
        clone_created = false;
    });


    // Lorsque la souris pointe sur l'overlay de la fenêtre de collage,
    $('#overlay_collage').mouseover(function(){
        // Si une oeuvre est en train d'être déplacée
        if(dragging_oeuvre){
            // On fait apparaître l'overlay en augmentant son opacité
            $(this).css('opacity','0.5');
        }
        // Sinon
        else{
            // On fait disparaître l'overlay en fixant son opacité à 0
            $(this).css('opacity','0');
            // et en empêchant son affichage pour permettre le tri et la visu
            // des éléments présents dans le collage
            $(this).css('display','none');
        }
    });


    // Au relachement de la souris sur l'overlay de la fenêtre de collage,
    $('#overlay_collage').mouseup(function(){
        // Si on était en train de déplacer une oeuvre
        if(dragging_oeuvre){
            // On fait disparaître l'overlay en fixant son opacité à 0
            $(this).css('opacity','0');
            $(this).css('display','none');
            // On a relâché la souris, donc on ne déplace plus d'oeuvre
            dragging_oeuvre = false;
            // Traitement suite au dépôt d'une oeuvre dans la fenêtre de collage

            // 1. Ajout de cette oeuvre dans la fenêtre de collage
            addOeuvreToCollage(dragging_oeuvre_id);



            // 3. Replacement de l'oeuvre d'origine à ses coordonnées exactes
            $('#'+dragging_oeuvre_id).css("left",+position_left+"px");
            $('#'+dragging_oeuvre_id).css("top",+position_top+"px");

            // 4. Incrémentation et Mise à jour par requête Ajax du compteur d'oeuvres dans la fenêtre de collage
            counterCollage++;
            updateCounterOeuvres(counterCollage);

            // 2. Suppression du clone créé lors du déplacement de l'oeuvre déposée dans la fenêtre de collage
            $('#clone_'+dragging_oeuvre_id).empty().remove();
            clone_created = false;
        }
    });


    // Lorsque la souris ne pointe plus sur l'overlay de la fenêtre de collage,
    $('#overlay_collage').mouseout(function(){
        // Si on était en train de déplacer une oeuvre
        if(dragging_oeuvre){
            // Dès qu'on ne le survole pas, on affice l'overlay, même s'il est transparent
            $(this).css('display','block');
            // On fait disparaître l'overlay en fixant son opacité à 0
            $(this).css('opacity','0');
        }
    });

    // Fonction d'ajout d'une oeuvre au collage
    function addOeuvreToCollage(dragging_oeuvre_id){
        // 1. Suppression de la classe 'oeuvres_toDrag' de l'objet
        $('#'+dragging_oeuvre_id).removeClass('oeuvres_toDrag');

        var linkPreviewCollage = $('#'+dragging_oeuvre_id).parent().attr('href');
        var typeCollage = '';
        if(($('#'+dragging_oeuvre_id).hasClass('image'))){
            typeCollage='image';
        }
        if(($('#'+dragging_oeuvre_id).hasClass('document'))){
            typeCollage='document';
        }
        if(($('#'+dragging_oeuvre_id).hasClass('video'))){
            typeCollage='video';
        }
        if(($('#'+dragging_oeuvre_id).hasClass('audio'))){
            typeCollage='audio';
        }

        $("#liste_oeuvres_collage").append('<a id="collage_tmp" href="'+linkPreviewCollage+'" class="preview_collage '+typeCollage+'"></a>');
        // 2. Clone de l'objet et ajout dans la liste d'oeuvres du collage
        $('#'+dragging_oeuvre_id).clone()
                                    .removeAttr("id")
                                    .attr("id", "collage_"+dragging_oeuvre_id)
                                    .addClass("oeuvres_collage")
                                    .removeClass("oeuvres_draggable")
                                    .removeClass("ui-draggable")
                                    .removeClass("ui-draggable-dragging")
                                    .css({'left' : '', 'top' : '', 'position' : 'relative', 'cursor' : 'crosshair', 'display' : 'inline-block'})
                                    .appendTo("#collage_tmp");

        $('#collage_tmp').removeAttr("id");
        $('#collage_'+dragging_oeuvre_id).children().css({'display': 'none','opacity':'0'});
    }

    // Fonction permettant la mise à jour du compteur d'oeuvre dans le collage
    function updateCounterOeuvres(counterCollage){
        // Requête Ajax vers le controleur pour mettre à jour le compteur d'oeuvres
        $.ajax({
            // url vers le controleur de gestion des collages et sa méthode 'updateCounterCollage'
            url: '../collage/updateCounterCollage',
            // Action de communication avec le serveur (ici, on choisit 'POST')
            type: 'POST',
            // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
            async : false,
            // Transfert de la valeur du compteur
            data: {'counterCollage' : counterCollage},
            success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                // Insertion de la vue chargée par le controleur ('updateCounterCollage_view.php') dans
                // le div '#label_btn_collage' déjà présent dans la vue 'collage_view.php'
                $('#label_btn_collage').html(msg);

                // S'il y a plus de 24 oeuvres, on n'affiche plus le texte indiquant le drag'n'drop
                if(counterCollage>=24){
                    $('#drag_n_drop_text').css('opacity','0');
                }
                else{
                    $('#drag_n_drop_text').css('opacity','1');
                }

                $(".oeuvres_collage" ).sortable({disabled: false});
                //On ne devrait pas avoir besoin de la classe draggable pour les oeuvres du collage...
                //$('.oeuvres_collage').draggable({ disabled: false });
                loadSortableProperties();

            }
        });

    }

    function loadSortableProperties(){

        /* ----------------------------------------------------------------------- */
        // Les événements qui suivent permettent de gérer le tri d'oeuvres         //
        // présentes dans le collage et l'affichage de l'overlay sur la poubelle   // 
        /* ----------------------------------------------------------------------- */

        // A l'appui sur une oeuvre affectée de la classe 'oeuvres_collage',
        // on met à jour la variable globale 'sorting_oeuvre' à true indiquant que l'oeuvre peut être triée
        $('.oeuvres_collage').mousedown(function(event){
            sorting_oeuvre = true;
            sorting_oeuvre_id = (event.target.id);
        });

        // Au relachement d'une oeuvre affectée de la classe 'oeuvres_collage',
        // on met à jour la variable globale 'sorting_oeuvre' à false indiquant que l'oeuvre ne peut plus être triée
        $('.oeuvres_collage').mouseup(function(){
            sorting_oeuvre = false;
        });


        $('.oeuvres_collage').click(function(){
            //alert('fancybox - visualisation d\'une oeuvre du collage!!');
        });

        $('#btn_poubelle').mouseover(function(){
            //alert(' apparition infobulle de la poubelle!');
        });

        $('#btn_poubelle').mouseout(function(){
            //alert(' disparition infobulle de la poubelle!');
        });

        $('#overlay_btn_poubelle').mouseover(function(){
            if(sorting_oeuvre){
                var newImg = '<img id="img_poubelle" src="../../assets/images/depot/D_pictoPoubelle_supprimer_noir.png">';
                $('#btn_poubelle').css('backgroundColor', '#FFFFFF');
                $('#btn_poubelle').html(newImg);
            }
        });

        $('#overlay_btn_poubelle').mouseout(function(){
            if(sorting_oeuvre){
                var newImg = '<img id="img_poubelle" src="../../assets/images/depot/D_pictoPoubelle_supprimer_blanc.png">';
                $('#btn_poubelle').css('backgroundColor', '#000000');
                $('#btn_poubelle').html(newImg);
            }
        });

        $('#overlay_btn_poubelle').mouseup(function(){
            if(sorting_oeuvre){
                $('#'+sorting_oeuvre_id).parent().empty().remove();
                var newImg = '<img id="img_poubelle" src="../../assets/images/depot/D_pictoPoubelle_supprimer_blanc.png">';
                $('#btn_poubelle').css('backgroundColor', '#000000');
                $('#btn_poubelle').html(newImg);
                sorting_oeuvre = false;

                // Décrémentation du compteur d'oeuvres dans le collage
                counterCollage--;
                // Mise à jour par requête Ajax du compteur d'oeuvres dans la fenêtre de collage
                updateCounterOeuvres(counterCollage);
            }
        });
    }


    // Requête AJAX d'enregistrement d'un nouveau collage
    $('#btn_enregistrer').click(function(){

        $('#overlay_page').css('display','block');

            // Appel de la méthode Ajax de JQuery, pour transmettre nos données à notre controleur 
            $.ajax({
                // url vers le controleur de gestion des collages et sa méthode 'loadCollageValidationForm'
                //url: '../collage/loadCollageValidationForm',
                url: '../collage/loadCollageValidationForm',
                // Action de transmission des données (ici, on choisit 'POST')
                type: 'POST',
                // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
                async : false,
                success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                    // Insertion de la vue chargée par le controleur dans le div '#controller_callback'
                    $('#collage_validation_form').html(msg);

                    // Apparition progressive de la vue, suivie d'une disparition progressive
                    $('#collage_validation_form').fadeIn(500);

                }
            });
            loadSaveProperties();
    });
}


/* ----------------------------------------------------------------------- */
// Les événements qui suivent permettent de gérer le formulaire de         //
// validation et d'enregistrement du collage nouvellement créé             // 
/* ----------------------------------------------------------------------- */
function loadSaveProperties(){

    // Fonction permettant la mise à jour du compteur d'oeuvre dans le collage
    function updateCounterOeuvres(counterCollage){
        // Requête Ajax vers le controleur pour mettre à jour le compteur d'oeuvres
        $.ajax({
            // url vers le controleur de gestion des collages et sa méthode 'updateCounterCollage'
            url: '../collage/updateCounterCollage',
            // Action de communication avec le serveur (ici, on choisit 'POST')
            type: 'POST',
            // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
            async : false,
            // Transfert de la valeur du compteur
            data: {'counterCollage' : counterCollage},
            success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)
                // Insertion de la vue chargée par le controleur ('updateCounterCollage_view.php') dans
                // le div '#label_btn_collage' déjà présent dans la vue 'collage_view.php'
                $('#label_btn_collage').html(msg);

                $(".oeuvres_collage" ).sortable({disabled: false});
                //On ne devrait pas avoir besoin de la classe draggable pour les oeuvres du collage...
                //$('.oeuvres_collage').draggable({ disabled: false });
                //loadSortableProperties();

            }
        });

    }


    $('#btn_cancel_collage').click(function(){

        $('#overlay_page').css('display','none');
        $('#collage_validation_form').css('display','none');
    });

    $('#btn_validate_collage').click(function(){
        
        var tab_id_oeuvres_collage = new Array();
        /* Mise en forme des données à enregistrer */
        // Récupération des id d'oeuvres
        $('.oeuvres_collage').each(function(){

            var collage_oeuvre_id = $(this).attr("id");
            $('#'+collage_oeuvre_id).empty();
            oeuvre_id = collage_oeuvre_id.lastIndexOf('_');
            var bdd_oeuvre_id = collage_oeuvre_id.substr(oeuvre_id + 1);

            tab_id_oeuvres_collage.push(parseInt(bdd_oeuvre_id));
        });

        // Mise en forme des données à transmettre (valeurs transmises en dur
        // en attendant la finalisation de la vue du collage
        var datas_collage = {
                nom: $('#form_nom_collage').val(),
                id_oeuvres: tab_id_oeuvres_collage
                };


        // Appel de la méthode Ajax de JQuery, pour transmettre nos données à notre controleur 
        $.ajax({
            // url vers le controleur de gestion des collages et sa méthode 'addNewCollage'
            url: '../collage/addNewCollage',
            // Action de transmission des données (ici, on choisit 'POST')
            type: 'POST',
            // Protocole de communication avec le controleur (ici, on attend son retour avant de traiter la fonction de callback)
            async : false,
            // Données du nouveau collage à transmettre mises en forme précédemment
            data: datas_collage,
            success: function(msg) { // En cas de succès, on exécute ce qui suit (fonction de callback)

                $('#overlay_page').css('display','none');
                $('#collage_validation_form').css('display','none');

                $('#controller_callback').html(msg);

                // Apparition progressive de la vue, suivie d'une disparition progressive
                $('#controller_callback').fadeIn(500, function(){
                    $('#controller_callback').fadeOut(10000);
                });

                // Décrémentation du compteur d'oeuvres dans le collage
                counterCollage = 0;
                // Mise à jour par requête Ajax du compteur d'oeuvres dans la fenêtre de collage
                updateCounterOeuvres(counterCollage);

                $('#liste_oeuvres_collage').html('');

            }

        });

    });
}




